import React, { Component } from "react";
import { connect } from "react-redux";
import { bindActionCreators } from "redux";

import { Switch,NavLink } from "react-router-dom"

import { actions } from "../../store/modules/index";

//引入样式
import "./index.css"

// 引入组件懒加载
let Home = React.lazy(() => import("../Home/Home.jsx"))
let Cate = React.lazy(() => import("../Cate/Cate.jsx"))
let Shop = React.lazy(() => import("../Shop/Shop.jsx"))
let Me = React.lazy(() => import("../Me/Me.jsx"))
let PrivateRoute = React.lazy(()=>import("../../utils/PrivateRoute"))

class Index extends Component {
    componentDidMount() { }
    render() {
        return (
            <>
                <React.Suspense fallback={<div>正在加载...</div>}>
                    <Switch>
                        <PrivateRoute path="/index/home" component={Home}></PrivateRoute>
                        <PrivateRoute path="/index/cate" component={Cate}></PrivateRoute>
                        <PrivateRoute path="/index/shop" component={Shop}></PrivateRoute>
                        <PrivateRoute path="/index/me" component={Me}></PrivateRoute>
                    </Switch>
                </React.Suspense>
                <footer>
                    <NavLink to="/index/home" activeClassName="select">主页</NavLink>
                    <NavLink to="/index/cate" activeClassName="select">分类</NavLink>
                    <NavLink to="/index/shop" activeClassName="select">购物车</NavLink>
                    <NavLink to="/index/me" activeClassName="select">我的</NavLink>
                </footer>
            </>

        );
    }
}

//导入数据
let mapStateToProps = (state) => ({});

//导入所有方法
let mapDispatchToProps = (dispatch) => ({ index: bindActionCreators(actions, dispatch), });

//将数据和方法给this.props
export default connect(mapStateToProps, mapDispatchToProps)(Index);